<template>
  <!-- 2.第四个问答区 特殊题型-->
  <div class="card-right">
    <span class="shu">|</span>
    <span>{{ Info.topic.title }}</span>
    <a-table ref="table" size="middle" :dataSource="listData" :rowKey="(record, index) => {
        return index;
      }
      " :pagination="false" :scroll="{ x: 1000 }" :row-selection="{
    selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange,
  }" :rowClassName="rowclassname">
      <a-table-column key="item" data-index="item" :width="110">
        <span slot="title" class="min-w-90p">{{ $t("user.v122") }}</span>
      </a-table-column>
      <a-table-column key="DetailNecessity" data-index="DetailNecessity" :width="180">
        <span slot="title" class="min-w-90p requiredIcon">{{ $t("user.v123") }}</span>
        <template slot-scope="text, record">
          <span>
            <!-- 数据处理必要性 -->
            <a-input v-model="record.DetailNecessity" @change="create(record)" 
            :placeholder="$t('user.verification-code.required111566110577139')" />
          </span>
        </template>
      </a-table-column>
      <!-- 最小必要类型 -->
      <a-table-column key="DetailType" data-index="DetailType" :width="300">
        <span slot="title" class="min-w-90p">{{ $t("user.v124") }}</span>
        <template slot-scope="text, record">
          <a-select v-model="record.DetailType" @change="create(record)" :placeholder="$t('user.verification-code.required11156611057733900')
            " style="width: 100%" :dropdownMatchSelectWidth="false" :dropdownStyle="{ width: '680px' }">
            <a-select-option v-for="item in Info.topic.type == 4
              ? DetailTypeList
              : DetailTypeListEN" :value="item.label" :key="item.value">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  {{ item.label }}
                </template>
                {{ item.label }}
              </a-tooltip>
              <!-- {{ item.label }} -->
            </a-select-option>
          </a-select>
        </template>
      </a-table-column>
      <!-- 通过何种途径取得个人同意 -->
      <a-table-column key="Ok" data-index="Ok" :width="300">
        <span slot="title" class="min-w-90p">{{ $t("user.v125") }}</span>
        <template slot-scope="text, record">
          <span>
            <a-select v-model="record.Ok" :placeholder="$t('user.verification-code.required11156677')"
              @change="create(record)" style="width: 100%" :dropdownMatchSelectWidth="false" :dropdownStyle="{ width: '380px' }">
              <a-select-option v-for="item in Info.topic.type == 4
                ? DetailWayList
                : DetailWayListEN" :value="item.label" :key="item.value">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    {{ item.label }}
                  </template>
                  {{ item.label }}
                </a-tooltip>
                <!-- {{ item.label }} -->
              </a-select-option>
            </a-select>
          </span>
        </template>
      </a-table-column>
      <a-table-column key="remark" data-index="remark" :width="170">
        <span slot="title" class="min-w-90p">{{
          $t("user.verification-code.required111566181")
        }}</span>
        <template slot-scope="text, record">
          <span>
            <!-- 备注 -->
            <a-input v-model="record.remark" @change="create(record)" :placeholder="$t('user.verification-code.required111566110577139')
              " />
          </span>
        </template>
      </a-table-column>
      <!--      <a-table-column key="action" :title="$t('app.setting.othersettings')">-->
      <!--        <template slot-scope="text, record">-->
      <!--          <span>-->
      <!--            <a-button type="link" @click="create(record)">{{ $t('app.setting.weakmode') }}</a-button>-->
      <!--          </span>-->
      <!--        </template>-->
      <!--      </a-table-column>-->
    </a-table>
    <a-button type="primary" class="batchup-btn mr-[10px]" :disabled="!selectedRowKeys.length" @click="batchup">{{
      $t("user.batchup") }}</a-button>
    <a-tooltip placement="top">
      <template slot="title">
        <div>
          {{ $t("user.verification-code.tooltiptitle") }}
        </div>
        <span>{{ $t("user.verification-code.tooltipcontent1") }}</span>
      </template>
      <a-icon type="question-circle" />
    </a-tooltip>
    <a-modal v-model="visible" width="600px">
      <a-space>
        <div class="ty"></div>
        {{ $t("user.editcontent") }}
      </a-space>
      <a-form :form="form" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }" layout="horizontal" labelAlign="left">
        <a-checkbox-group @change="onChange" v-model="checkedValues">
          <div class="flex-row">
            <a-checkbox value="DetailNecessity"></a-checkbox>
            <a-form-item :label="$t('user.v123')">
              <a-input v-decorator="['DetailNecessity']" :placeholder="$t('user.verification-code.required111566110577139')
                " @change="onChange(checkedValues)"></a-input>
            </a-form-item>
          </div>
          <div class="flex-row">
            <a-checkbox value="DetailType"></a-checkbox>
            <a-form-item :label="$t('user.v124')">
              <a-select v-decorator="['DetailType']" :placeholder="$t('user.verification-code.required11156611057733900')
                " @change="onChange(checkedValues)" :dropdownMatchSelectWidth="false" :dropdownStyle="{ width: '680px' }">
                <a-select-option v-for="item in Info.topic.type == 4
                  ? DetailTypeList
                  : DetailTypeListEN" :value="item.label" :key="item.value">
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      {{ item.label }}
                    </template>
                    {{ item.label }}
                  </a-tooltip>
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div class="flex-row">
            <a-checkbox value="Ok"></a-checkbox>
            <a-form-item :label="$t('user.v1235')">
              <a-select v-decorator="['Ok']" :placeholder="$t('user.verification-code.required11156677')"
                @change="onChange(checkedValues)" :dropdownMatchSelectWidth="false" :dropdownStyle="{ width: '380px' }">
                <a-select-option v-for="item in Info.topic.type == 4
                  ? DetailWayList
                  : DetailWayListEN" :value="item.label" :key="item.value">
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      {{ item.label }}
                    </template>
                    {{ item.label }}
                  </a-tooltip>
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div class="flex-row">
            <a-checkbox value="remark"></a-checkbox>
            <a-form-item :label="$t('user.verification-code.required111566181')">
              <a-input v-decorator="['remark']" :placeholder="$t('user.verification-code.required111566110577139')
                " @change="onChange(checkedValues)"></a-input>
            </a-form-item>
          </div>
        </a-checkbox-group>
      </a-form>
      <div class="flex absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center">
        <a-button class="border-none hover:bg-[#3F8CFF] hover:bg-opacity-5 shadow mr-[20px]" @click="close">{{
          $t("user.email.required11") }}</a-button>
        <a-button class="border-none shadow" type="primary" :disabled="!checkedValues.length || btnDdisabled"
          @click="submit" :loading="tLoading">{{ $t("user.email.required1111") }}
        </a-button>
      </div>
    </a-modal>
    <div class="big-box" v-if="ifLoading">
      <a-spin />
    </div>
  </div>
</template>

<script>
import {
  columns,
  DetailTypeList,
  DetailTypeListEN,
  DetailWayList,
  DetailWayListEN,
} from "@/views/dataAssessment/dpia/onequestion/datas/selectVals";

export default {
  props: {
    Info: {
      type: Object,
    },
  },
  data() {
    return {
      DetailWayList,
      DetailWayListEN,
      columns,
      DetailTypeList,
      DetailTypeListEN,
      listData: [],
      form: this.$form.createForm(this),
      selectedRowKeys: [],
      visible: false,
      checkedValues: [],
      btnDdisabled: true,

      //loading
      ifLoading: false,

      //按钮loading
      tLoading: false,
      NewTw:0
    };
  },
  created() {
    this.init();
  },
  methods: {
    rowclassname(record, index) {
      if (this.NewTw ==1){

      } else {
        return record.start == 1 ? "first" : "second";
      }
    },
    init() {
      let arr = [];
      let arrIndex = [];
      // 初始化答题数据
      if (this.Info.lastAnswer != null) {
        for (let i = 0; i < this.Info.lastAnswer.length; i++) {
          // 存储ID，用于比对判断
          arrIndex.push(parseInt(this.Info.lastAnswer[i].Id));
          arr.push({
            item: this.Info.lastAnswer[i].answer,
            DetailNecessity: this.Info.lastAnswer[i].DetailNecessity,
            DetailType: this.Info.lastAnswer[i].DetailType,
            Ok: this.Info.lastAnswer[i].Ok,
            remark: this.Info.lastAnswer[i].remark,
            DataItem: this.Info.lastAnswer[i].DataItem, // 转换为整数
            Id: this.Info.lastAnswer[i].Id,
            start:2
          });
        }
        
        this.NewTw = 0
      } else{
        this.NewTw = 1
      }
      // 将数据项渲染
      
      for (let i = 0; i < this.Info.customize.length; i++) {
        if (  arrIndex.indexOf(parseInt(this.Info.customize[i].Id)) === -1 ) {
          arr.push({
            item: this.Info.customize[i].item,
            DetailNecessity: this.Info.customize[i].DetailNecessity,
            DataItem: this.Info.customize[i].DataItem,
            Id: this.Info.customize[i].Id,
            start:1
          });
        }
      }
      this.listData = arr;
      console.log("listData", this.listData);
    },
    create(record) {
      let { DetailNecessity, DetailType, Ok, remark } = record;
      // if (!DetailNecessity) {
      //   this.$message.error('处理目的及必要性不能为空')
      //   return;
      // }
      // if (!DetailType) {
      //   this.$message.error('最小必要类型不能为空')
      //   return
      // }
      // if (!Ok) {
      //   this.$message.error('通过何种途径取得个人同意不能为空')
      //   return
      // }
      // if (!remark) {
      //   remark = ""
      //   // this.$message.error('备注不能为空')
      //   // return
      // }
      let value = Array(DetailNecessity, DetailType, Ok, remark);
      let res = Array(record.Id, record.DataItem);
      
      this.$emit("result", {
        title: this.Info.topic.title,
        answerName: value.join(","),
        chapter: this.Info.topic.chapter,
        topic: this.Info.topic.id,
        textValue: value.join("#@%$"),
        AnswerQid: res.join("#@%$"),
        type: this.Info.topic.type,
      });
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    close() {
      this.visible = false;
      this.tLoading = false;
    },
    submit() {
      this.tLoading = true;
      setTimeout(() => {
        let changeList = this.form.getFieldsValue(this.checkedValues);
        for (let i = 0; i < this.listData.length; i++) {
          if (this.selectedRowKeys.includes(i)) {
            for (const key in changeList) {
              if (Object.hasOwnProperty.call(changeList, key)) {
                this.listData[i][key] = changeList[key];
              }
            }
            this.create(this.listData[i]);
          }
        }
        this.tLoading = false;
        this.close();
      }, 1500);
    },
    onChange(checkedValues) {
      this.checkedValues = checkedValues;
      this.btnDdisabled = false;
      this.$nextTick(() => {
        checkedValues.forEach((element) => {
          if (
            this.form.getFieldValue(element) === undefined ||
            !this.form.getFieldValue(element)
          ) {
            this.btnDdisabled = true;
          }
        });
      });
    },
    batchup() {
      this.form.resetFields();
      this.checkedValues = [];
      this.visible = true;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-table-tbody .first {
    background-color: #ed8d8d3b !important;
}

/deep/.ant-table-tbody .second {
    // background-color: #071641 !important;
}
.card-right {
  margin: 30px 30px 30px 60px;
  flex-grow: 0;

  :deep(.ant-table) {
    max-width: calc(100vw - 358px - 220px - 120px);
  }
}

.shu {
  /*矩形备份*/
  margin-right: 5px;
  left: 838px;
  top: 287px;
  width: 6px;
  height: 12px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}

:deep(.ant-select-selection-selected-value) {
  width: 280px;
}
</style>
<style lang="less">
.card-left {
  margin-left: 20px;
}

.batchup-btn {
  margin-top: 10px;
}

.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}

.ant-checkbox-group {
  width: 100%;
}

.ant-form {
  margin-top: 10px;

  .flex-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    .ant-checkbox {
      width: 20px;
    }

    .ant-form-item {
      margin-bottom: 0;
      flex: 1;
      align-items: center;
    }
  }
}

.big-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.requiredIcon {
  &::after {
      content: '*';
      color: #f5222d;
      padding-left: 2px;
    }
}

</style>